<template>
  <div class="home">
    <a-row>
      <a-col type="flex" justify="center" align="top" :span="24">
        <img v-bind:src="image" alt="">
      </a-col>
      <a-col class='nav' type="flex" justify="center" align="top" :span="24">
        <div class="layout">

          <a-col class='left' type="flex" justify="flex-start" align="top" :span="24">
            <!-- <router-link to="/" class="fl"></router-link> -->
          <ul class="fl">
            <li>
              <div class='didian'>{{this.address}}
                  <ul class="bot" style="background:white">
                    <li v-for="(items,index) in list" ref="area" :key="items" @click="change(index)" style="list-style:none;font-size:16px;">{{items}}</li>
                  </ul>
              </div>
              
            </li>
            <li v-for="item in ul_left" :key="item.id">
              <a :href="item.url == '' ? 'javascript:void(0)': item.url" >
              <span>{{item.text}}</span>
              </a>
            </li>
            
          </ul>
          <ul class="fr">
              <li><slot></slot></li>
            <li v-for="item in ul_right" :key="item.id">
              <a :href="item.url == '' ? 'javascript:void(0)': item.url" >
              <span>{{item.text}}</span>
              </a>
            </li>
          
          </ul>
          </a-col>
        </div>
      </a-col>
    </a-row>
    <!-- <ul class="sidebar-right">
      <li class="side-1">1</li>
      <li class="side-2">2</li>
      <li class="side-3">3</li>
    </ul> -->




  </div>
</template>

<script>
import image from '@/assets/images/header.jpg'
export default {
  name: 'Home',
  data (){
      return{
        address:'北京站',
          popup: 0,
          image,
          logo :"",
          list:["上海站","广州站","深圳站","杭州站","成都站","武汉站","苏州站","北京站"],
          ul_left:[
            {
              type:'tab-active',
              text:'首页',
              url:'/Firstpage',
            },
            {
              type:'',
              text:'企业',
              url:'/business'
            },
            {
              type:'',
              text:'人才',
              url:'/person1'
            },
            {
              type:'',
              text:'通知',
              url:'/Inform1'
            },
          ],
          ul_right:[
            {
              type:'suggestCity',
              text:'登录',
              url:'/login',
              icon_isShow: true
            },
            {
              type:'tab-active',
              text:'注册',
              url:'/register',
            },
          ]
      }
      
  },
  methods:{
    change(num){
      console.log(this.$refs.area[num].innerText)
      this.address = this.$refs.area[num].innerText
    }
  },
  components: {
    
  }
}
</script>

<style scoped>
  /* .home{
    margin: 0 auto;
    
  } */
  img{
    width: 100%;
    height: 80px;
  }
  .nav{
    width: 100%;
    height: 40px;
    background-color: #2d2c31;
  }
  .layout{
    width: 1226px;
    margin: 0 auto;
  }
  li{
    list-style-type: none;
  }
  .fl{
    float: left;
  }
  .fr{
    float: right;
  }

  .nav .layout{
    height: 100%;
  }
  .nav .layout>.left{
    height: 100%;
  }
  .nav .layout>.left>a{
    display: inline-block;
    width: 43px;
    height: 40px;
    padding: 10px;
    background-image: url();
    background-repeat: no-repeat;
    background-position: -10px -1px;
    background-size: 64px 128px;
  }
  .nav .layout>.left>ul {
      margin-left: 34px;
  }
  .nav .layout>.left>ul>li{
      float: left;
      padding: 10px 40px;
  }  
  .nav .layout>.left>ul>li>a {
      color: rgb(160, 150, 150);
      font-size: 16px;
  }
  .nav .layout>.left>ul>li>a:hover{
      color: #ffffff;
  }
.didian{
  font-size: 16px;
  color: rgb(160, 150, 150);
  position: relative;
  width: 70px;
  height: 30px;
}
.didian:hover .bot{
  display: block!important;
  cursor: pointer;
}
.bot{
  position: absolute;
  top: 30px;
  left: -10px;
  padding:0!important;
  display: none;
  border:2px solid #2d2c31;
}
.bot li{
  font-size: 16px!important;
  color: black;
  text-align: center;
   width: 60px;
}
.bot li:hover{
  background: green;
  cursor: pointer;
  width: 60px;
  display: block!important;
}
</style>